title: react文档1-4_组件 & Props
date: 2018.9.14
tags:

• react.js
  toc_fold: unfold

2018.9.14 星期五 16:32

组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。

函数定义/类定义组件

该函数是一个有效的React组件，它接收一个单一的“props”对象并返回了一个React元素。我们之所以称这种类型的组件为函数定义组件，是因为从字面上来看，它就是一个JavaScript函数。
$_PS: 注意区别 React元素和Dom元素/标签

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
// React元素都只是DOM标签：
const element = <div />;
// React元素也可以是用户自定义的组件
const element = <Welcome name="Sara" />;

组件渲染

当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。

组件名称必须以大写字母开头。
例如，<div />表示一个DOM标签，但<Welcome />表示一个组件并限定了它的可用范围。

组合组件

组件的返回值只能有一个根元素。这也是我们要用一个<div>来包裹所有<Welcome />元素的原因

提取组件

我们建议从组件自身的角度来命名props，而不是根据使用组件的上下文命名。

Props的只读性

无论是使用函数或是类来声明一个组件，它决不能修改它自己的props
所有的React组件必须像纯函数那样使用它们的props。

17:28